<template>
  <div>
    <!-- 左侧导航栏 -->
    <el-col :span="4" style="height:100%">
      <el-menu :router="true" default-active="/admin/users" background-color="#223458" text-color="#d3d6dd" active-text-color="#6290c8 ">
        <el-menu-item index="/admin/users">
          <i class="el-icon-user"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/scenery">
          <i class="el-icon-menu"></i>
          <span slot="title">景区管理</span>
        </el-menu-item>
        <el-submenu index="/admin/accommodation" id="Mysubmenu">
          <template slot="title">
            <div style="height:80px;line-height: 80px;">
              <i class="el-icon-map-location"></i>
              <span style="font-size: 20px;">周边管理</span>
            </div>
          </template>
          <el-menu-item index="/admin/accommodation">
            <i class="el-icon-office-building"></i>
            <span slot="title">住宿场所管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/dining">
            <i class="el-icon-food"></i>
            <span slot="title">餐饮场所管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/shop">
            <i class="el-icon-shopping-cart-full"></i>
            <span slot="title">购物场所管理</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>

    <!-- 右侧主要内容 -->
    <el-col :span="20">
      <el-container>
        <el-header
          style="text-align: right; background-color:#223458;opacity: 0.95;color: aliceblue; font-size: 5px; display: flex;align-items:center;justify-content: flex-end;">
          <el-avatar class="item" :size="45" :src="user_avatar" style="margin-right: 30px;"></el-avatar>
          <span class="item" style="margin-right: 30px; font-size: 20px">{{ user_name }}</span>
          <el-dropdown class="item" @command="logOut">
            <span class="item" style="font-size: 25px;color: white;">
              <i class="el-icon-setting " style="margin-right: 30px"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="font-size: 10px" command="a">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main style="padding:10px 0 0 0">
          <div style="padding: 20px;">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-col>
  </div>
</template>

<script>
import personalApi from "@/api/personal";

export default {
  data() {
    return {
      user_name: '',
      user_avatar: ''
    }
  },
  methods: {
    logOut(command) {
      window.localStorage.clear();
      this.$router.push("/login");
    },
    loadUserInfo() {
      personalApi.getInfo().then(res => {
        if(res.data.avatar) {
          this.user_name=res.data.user_name;
          this.user_avatar=res.data.avatar;
        }
      })
    },

  },
  mounted() {
    this.loadUserInfo();
  }
}

</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
  border-color: #004e89;

  .el-menu-item {
    height: 80px;
    font-size: 20px;

    span {
      line-height: 80px;
    }
  }
}

.el-header {
  background-color: #dee4ef;
  color: #333;
  line-height: 60px;
}

.item {
  float: left;
}
</style>
<style>
#Mysubmenu .el-submenu__title {
  height: 80px;
  line-height: 80px;
}
</style>